<template>
  <el-table
    border
    max-height="500"
    :data="value"
    style="width:100%;font-size:12px"
  >
    <el-table-column
      width="50"
      type="index"
      align="center"
    >
    </el-table-column>
    <el-table-column
      min-width="120"
      prop="manufacturersName"
      label="厂家名称"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="productNo"
      align="center"
      min-width="150"
      label="商品编号">
    </el-table-column>
    <el-table-column
      prop="productName"
      min-width="290"
      align="center"
      label="商品名称">
    </el-table-column>
    <el-table-column
      prop="bigClass"
      align="center"
      min-width="150"
      label="商品大类">
    </el-table-column>
    <el-table-column
      prop="middleClass"
      align="center"
      min-width="150"
      label="商品小类">
    </el-table-column>
    <el-table-column
      min-width="100"
      prop="packageCode"
      align="center"
      label="包件编号">
    </el-table-column>
    <el-table-column
      min-width="300"
      align="center"
      prop="packageName"
      label="包件名称">
    </el-table-column>
    <template v-if="out">
      <el-table-column
        min-width="80"
        align="center"
        prop="availableNum"
        label="可用库存">
      </el-table-column>
    </template>
    <el-table-column
      prop="num"
      align="center"
      width="120"
      :label="out ? '出库包件数' : '包件数'">
      <template slot-scope="scope">
        <el-form-item label-width="0" :prop="'productDetailBeans.' + scope.$index + '.num'" :rules="[
          {required: true, message: '包件数量必须', trigger: 'change'}
        ]">
          <el-input :maxlength="200" v-model="scope.row.num"/>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column
      prop="volume"
      align="center"
      min-width="120"
      label="总体积(m³)">
      <template slot-scope="scope">
        {{ scope.row.totalVolume = scope.row.volume * scope.row.num | decimalNumFilter}}
      </template>
    </el-table-column>
    <el-table-column
      min-width="80"
      label="操作"
      align="center"
    >
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import {decimalNumFilter} from '@/filters'
import Emitter from '@/utils/emitter.js'
export default {
  name: 'orderPackageTable',
  mixins: [Emitter],
  filters: {
    decimalNumFilter
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    out: { // 是否是出库单
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(val, oldVal) {
      this.$nextTick(_ => {
        this.dispatch('ElFormItem', 'el.form.change', val)
      })
    }
  },
  data() {
    return {}
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        const values = data.map(item => Number(item[column.property]))
        if (index === 0) {
          sums[index] = '合计'
        } else {
          if (column.property === 'totalVolume' || column.property === 'num') {
            let temp = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = decimalNumFilter(temp, column.property === 'num' ? 0 : 2)
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    // 删除
    handleDelete(index, row) {
      this.value.splice(index, 1)
    }
  }
}
</script>
